import React, { Component } from "react";
import "./css/settings.less";
import AreaManagementPage from "./AreaManagementPage/AreaManagementPage.jsx";

import pingmiantu from '../../static/login/pingmiantu.png';

class Settings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedGroup: null,
      activeTab: "Sensor Control",
      powerOn: true,
      dimLevel: 50,
      cct: 3500,
      motion: false,
      daylight: false,
      vacant: false,
      groups: [
        { id: 1, name: "Office 01" },
        { id: 2, name: "Office 02" },
        { id: 3, name: "Office 03" },
        { id: 4, name: "Office 04" },
        { id: 5, name: "Office 05" },
        { id: 6, name: "Office 06" },
        { id: 7, name: "Warehouse 02" }
      ]
    };
  }

  handleGroupClick = (id) => {
    this.setState({ selectedGroup: id });
  };

  handleTabChange = (tab) => {
    this.setState({ activeTab: tab });
  };

  renderPopupContent() {
    const {
      activeTab,
      dimLevel,
      cct,
      powerOn,
      motion,
      daylight,
      vacant,
      selectedGroup,
      groups
    } = this.state;

    if (activeTab === "Sensor Control") {
      return (
        <div className="tab-content2">
          {/* 标题 + 电源开关 */}
          <div className="popup-header">
            <span>
              {groups.find((g) => g.id === selectedGroup)?.name || "Office"}
            </span>
            <button
              className={`power-btn ${powerOn ? "on" : "off"}`}
              onClick={() => this.setState({ powerOn: !powerOn })}
            >
              {powerOn ? "🟢 On" : "🔴 Off"}
            </button>
          </div>

          {/* Dim level */}
          <div className="row">
            <label>Dim level:</label>
            <div className="dim-controls">
              <span>10W</span>
              <input
                type="range"
                min="0"
                max="100"
                value={dimLevel}
                onChange={(e) => this.setState({ dimLevel: e.target.value })}
              />
              <span>{dimLevel}%</span>
            </div>
          </div>

          {/* CCT Tunable */}
          <div className="row">
            <label>CCT Tunable:</label>
            <div className="cct-controls">
              <span>2700K</span>
              <input
                type="range"
                min="2700"
                max="6500"
                step="100"
                value={cct}
                onChange={(e) => this.setState({ cct: e.target.value })}
              />
              <span>{cct}K</span>
            </div>
          </div>

          {/* Motion / Daylight / Vacant */}
          <div className="row switches">
            <label>
              <input
                type="checkbox"
                checked={motion}
                onChange={() => this.setState({ motion: !motion })}
              />
              Motion Sensor
            </label>
          </div>
          <div className="row switches">
            <label>
              <input
                type="checkbox"
                checked={daylight}
                onChange={() => this.setState({ daylight: !daylight })}
              />
              Daylight Mode
            </label>
          </div>
          <div className="row switches">
            <label>
              <input
                type="checkbox"
                checked={vacant}
                onChange={() => this.setState({ vacant: !vacant })}
              />
              Vacant
            </label>
          </div>

          {/* Device List */}
          <div className="row">
            <label>Device List (8 Devices)</label>
          </div>
        </div>
      );
    } else if (activeTab === "Emergency Driver") {
      return (
        <div className="tab-content2">
          <h4>Emergency Driver</h4>
          <p>配置紧急驱动器功能。</p>
          <button className="test-btn">Test Emergency</button>
        </div>
      );
    }
    return null;
  }

  render() {
    const { groups, selectedGroup, activeTab } = this.state;

    return (
      <div className="home-container2">
        {/* 左边侧边栏 */}
        <div className="sidebar1">
          <AreaManagementPage></AreaManagementPage>
        </div>


        {/* 右边平面图 */}
        <div className="content">
          <div className="floorplan">
            <img src={pingmiantu} alt="background" className="bg-image" />

            {/* 悬浮弹框 */}
            {selectedGroup && (
              <div className="popup">
                {/* Tabs */}
                <div className="tabs">
                  <button
                    className={activeTab === "Sensor Control" ? "active" : ""}
                    onClick={() => this.handleTabChange("Sensor Control")}
                  >
                    Sensor Control
                  </button>
                  <button
                    className={activeTab === "Emergency Driver" ? "active" : ""}
                    onClick={() => this.handleTabChange("Emergency Driver")}
                  >
                    Emergency Driver
                  </button>
                </div>

                {/* 动态内容 */}
                {this.renderPopupContent()}

                {/* 底部按钮 */}
                <div className="popup-footer">
                  <button onClick={() => this.setState({ selectedGroup: null })}>
                    Cancel
                  </button>
                  <button>Confirm</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Settings;
